import React, { useState,useEffect } from 'react';
import axios from 'axios';
import { Pagination,message,Button } from 'antd';

const P = {
    list(list){
        const listD = list.map((item,key)=>{
            return(
                <li key={item.id}>{item.main_title}</li>
            )
        })
        return listD;
    },
    async getApi(ajaxCfg){
        let data = await axios.get(ajaxCfg.url,{params:ajaxCfg.cfg},
        {
            headers: ajaxCfg.headers
        })
        return data;
    }
}

const View = (props)=>{
    // 声明一个叫 “count” 的 state 变量。
    const [count, setCount] = useState(0);
    const [test, setTest] = useState(0);
    const [fruit, setFruit] = useState('banana');
    const [todos, setTodos] = useState([]);

    const [pageConfig,setPageConfig] = useState({
        totalPage: 0, //总页码
        currentPage:sessionStorage.getItem('currentPage')||1
    })
    const todolist = [
        { text: 'Learn Hooks'},
    ]
     // this.setState((state)=>{
     //     state:state+1
     // })
    useEffect(() => {
        document.title = `You clicked ${count} times`;
    });
    useEffect(()=>{
        // componentDidMount
        // componentDidUpdate
        return ()=>{
            // componentWillUnmount
        }
    })
//     useEffect(() => {
//   document.title = `You clicked ${count} times`;
// }, [count]); // 仅在 count 更改时更新
    function getCurrentPage(currentPage,page_size=10){
        const ajaxCfg = {
            url:'/home/mediareports',
            cfg:{
                page_number:currentPage,
                page_size:page_size
            },
            headers:{}
        }
        P.getApi(ajaxCfg).then((res)=>{
            if(res.data.code==200){
                let {data,total} = res.data;
                setTodos(res.data.data);
                setPageConfig({
                    totalPage: total, //总页码
                    // totalPage: Math.ceil(total/page_size), //总页码
                    currentPage:currentPage
                })

            }
        })
    }
    useEffect(()=>{
        getCurrentPage(1)
    },[todos.id])

    const pageCfg = {
        pageConfig:pageConfig,
        getCurrentPage:getCurrentPage
    }
    return(
        <React.Fragment>
            <h3>开始学hook{count}</h3>
            <input onClick={() => setCount(count + 1)} type="button" value="点击"/>
            <h3>开始学hook{test}</h3>
            <input onClick={() => setTest(test + 1)} type="button" value="点击"/>
            <h3>开始学hook{fruit}</h3>
            <input onClick={() => setFruit(fruit+'banana')} type="button" value="点击"/>
            <ul>{P.list(todos)}</ul>
            <input onClick={() => setTodos(todolist)} type="button" value="点击"/>
            <Pagination onChange={getCurrentPage} defaultCurrent={pageConfig.currentPage} total={pageConfig.totalPage} />
        </React.Fragment>
    )
}

// function View(props){
//     console.log(props)
//     return(
//             <React.Fragment>
//                 <h3>开始学hook</h3>
//             </React.Fragment>
//         )
// }
export default View;
